<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加分类 -->
    <el-row>
      <el-col>
        <el-button type="primary" @click="addCate">添加分类</el-button>
      </el-col>
    </el-row>
    <!-- 卡片 -->
    <tree-table
      :data="cateList"
      :columns="columns"
      ref="treeTable"
      :stripe="false"
      :border="true"
      :show-index="true"
      :tree-type="true"
      :selection-type="false"
      :expand-type="false"
    >
      <!-- 是否有效模板 -->
      <template slot="isOk" slot-scope="scoped">
        <i
          class="el-icon-success"
          v-if="scoped.row.cat_deleted"
          style="color: light-green"
        ></i>
        <i class="el-icon-error" v-else style="color: red"></i>
      </template>
      <!-- 排序模板 -->
      <template slot="order" slot-scope="scoped">
        <el-tag size="mini" type="primary" v-if="scoped.row.cat_level == 0"
          >一级</el-tag
        >
        <el-tag size="mini" type="danger" v-else-if="scoped.row.cat_level == 1"
          >二级</el-tag
        >
        <el-tag size="mini" type="warning" v-else>三级</el-tag>
      </template>
      <!-- 操作模板 -->
      <template slot="opt" slot-scope="scoped">
        <el-button
          icon="el-icon-edit"
          type="primary"
          @click="edit(scoped.row)"
          >编辑</el-button
        >
        <el-button icon="el-icon-delete" type="danger" @click="del(scoped.row)">删除</el-button>
      </template>
    </tree-table>
    <!-- 分页组件-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.pagenum"
      :page-sizes="[1, 2, 3, 4, 5]"
      :page-size="page.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 添加分类对话框 -->
    <el-dialog
      title="添加分类"
      :visible.sync="addCateDialogVisible"
      @close="closeAddCateDialog"
    >
      <el-form :model="addCateinfo" ref="addCateForm" label-width="80px">
        <el-form-item
          label="分类名称"
          prop="cat_name"
          :rules="[
            { required: true, message: '分类名称不能为空', trigger: 'blur' },
          ]"
        >
          <el-input v-model="addCateinfo.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <el-cascader
            v-model="selectedId"
            :options="parentCateList"
            :props="props"
            @change="handleChange"
            clearable
            style="width: 100%"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCateSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑分类对画框 -->
    <el-dialog
      title="编辑分类"
      :visible.sync="editCateDialogVisible"
    >
      <el-form :model="editCateinfo" ref="editCateForm" label-width="80px">
        <el-form-item
          label="分类名称"
          prop="cat_name"
          :rules="[
            { required: true, message: '分类名称不能为空', trigger: 'blur' },
          ]"
        >
          <el-input v-model="editCateinfo.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editCateSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {confirm} from '../../utils/index'
// console.log(confirm) 
export default {
  created() {
    this.getCateList();
  },
  data() {
    return {
        editCateinfo:{
            id:0,
            cat_name:''
        },
      // 编辑分类对话框是否显示
      editCateDialogVisible: false,
      // 级联选择器选中的值
      selectedId: [],
      // 添加分类对话框是否可视
      addCateDialogVisible: false,
      // 级联选择器的数据
      parentCateList: [],
      // 级联选择器的props配置
      props: {
        expandTrigger: "hover",
        label: "cat_name",
        value: "cat_id",
        checkStrictly: true,
      },
      // 添加分类信息
      addCateinfo: {
        //   将要添加的分类名称
        cat_name: "",
        // 选择的父分类,默认为0
        cat_pid: 0,
        // 等级,默认为0
        cat_level: 0,
      },
      // 输入的分类名称
      cateName: "",
      cateList: [],
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          prop: "cat_deleted",
          type: "template",
          template: "isOk",
        },
        {
          label: "排序",
          prop: "cat_level",
          type: "template",
          template: "order",
        },
        {
          label: "操作",
          type: "template",
          template: "opt",
        },
      ],
      page: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      total: 1,
    };
  },
  methods: {
    //   点击删除分类
    async del(row){
        let $confirm=await confirm().catch(err=>err)
        if($confirm!='confirm')return this.$message.info("已取消删除")
        let {data:res}=await this.$axios.delete(`categories/${row.cat_id}`)
        if(res.meta.status!=200)return this.$message.error("删除失败")
        this.$message.success("删除成功")
        this.getCateList()
    },
    //   点击编辑分类的确定按钮
    async editCateSubmit(){
        // 预校验
        let {data:res}=await this.$axios.put(`categories/${this.editCateinfo.id}`,{cat_name:this.editCateinfo.cat_name})
        if(res.meta.status!=200)return this.$message.error("编辑分类失败")
        this.$message.success("编辑分类成功")
        this.editCateDialogVisible=false
        this.getCateList()
    },
    //   编辑按钮
    edit(row){
        this.editCateinfo={
            id:row.cat_id,
            cat_name:row.cat_name
        }
        this.editCateDialogVisible=true
    },
    //   添加分类点击确定按钮
    addCateSubmit() {
      this.$refs.addCateForm.validate((valid) => {
        if (valid) {
          this.addCatetodata();
        }
      });
    },
    // 封装提交添加分类的函数
    async addCatetodata() {
      let { data: res } = await this.$axios.post(
        "categories",
        this.addCateinfo
      );
      if (res.meta.status != 201) return this.$message.error("添加失败");
      this.$message.success("添加成功");
      this.addCateDialogVisible = false;
      this.getCateList();
    },
    //   关闭对话框
    closeAddCateDialog() {
      this.$refs.addCateForm.resetFields();
      this.selectedId = [];
      this.addCateinfo = {
        //   将要添加的分类名称
        cat_name: "",
        // 选择的父分类,默认为0
        cat_pid: 0,
        // 等级,默认为0
        cat_level: 0,
      };
    },
    //   每点击选择器
    handleChange() {
      // 监听选择器变化
      if (this.selectedId.length > 0) {
        // 说明有选择选择器的值
        this.addCateinfo.cat_pid = this.selectedId[this.selectedId.length - 1];
        this.addCateinfo.cat_level = this.selectedId.length;
      } else {
        this.addCateinfo.cat_pid = 0;
        this.addCateinfo.cat_level = 0;
      }
    },
    //   点击添加分类按钮
    addCate() {
      // 渲染分类数据
      this.getparentCate();
    },
    // 封装的到二级分类数据的函数
    async getparentCate() {
      let { data: res } = await this.$axios.get("categories", {
        params: { type: 2 },
      });
      if (res.meta.status != 200) return this.$message.error("获取数据失败");
      this.parentCateList = res.data;
      this.addCateDialogVisible = true;
    },
    //   当前页码发生变化
    handleCurrentChange(value) {
      this.page.pagenum = value;
      this.getCateList();
    },
    //   分页组件每页数量发生变化
    handleSizeChange(value) {
      this.page.pagesize = value;
      this.getCateList();
    },
    // 获取分类的方法
    async getCateList() {
      let { data: res } = await this.$axios.get("/categories", {
        params: this.page,
      });
      if (res.meta.status != 200) return this.$message.error("获取数据失败");
      this.total = res.data.total;
      this.cateList = res.data.result;
    },
  },
};
</script>
<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
}
</style>